/* 路径头 */
<template>
	<div class="breadcrumb">
		<!-- 返回键 -->
		<el-button
			icon="el-icon-arrow-left"
			circle
			size="mini"
			:disabled="urlArr.length===1"
			@click="onclickReback"
		/>
		<!-- 路径显示 -->
		<div class="url">
			<div
				class="url-item"
				v-for="(item,i) in urlArr"
				:key="i"
			>
				<span
					class="value"
					@click="onclickPath(i)"
				>
					{{item}}
				</span>
				<!-- 最后一项没有箭头 -->
				<span
					v-if="i < urlArr.length-1"
					class="arrows"
				>
					>
				</span>
			</div>
		</div>
		<el-button
			class="right-btn"
			size="mini"
			@click="$emit('createFolder')"
		>
			新建文件夹
		</el-button>
		<!-- 上传按键 -->
		<el-button
			class="right-btn"
			type="primary"
			icon="el-icon-upload2"
			size="mini"
			round
			@click="$emit('startUpload')"
		>
			上传文件
		</el-button>
	</div>
</template>

<script>
export default {
  props: {
    url: {
      type: String,
      required: true
    }
  },
  computed: {
    urlArr() {
      const arr = this.url.split('/').filter(item => item)

      return ['root', ...arr]
    }
  },
  methods: {
    /**
		 * 点击退回键
		 */
    onclickReback() {
      if (this.urlArr.length === 2) {
        this.$emit('urlChange', '/')
      } else {
        const path = `/${ this.urlArr.slice(1, -1).join('/') }/`

        this.$emit('urlChange', path)
      }
    },
    /**
		 * 点击路径，快捷跳转
		 */
    onclickPath(i) {
      if (i === this.urlArr.length - 1) {
        return
      }
      if (i === 0) {
        this.$emit('urlChange', '/')
      } else {
        const path = `/${ this.urlArr.slice(1, i + 1).join('/') }/`

        this.$emit('urlChange', path)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.breadcrumb {
  display: flex;
  align-items: center;

  .url {
    display: flex;
    flex: 1;
    margin: -5px 10px 0;

    .value {
      cursor: pointer;

      &:hover {
        color: $blue;
      }
    }

    .arrows {
      margin: 0 5px;
    }
  }

  .right-btn {
    float: right;
  }
}
</style>
